<!-- 不用的dataInfoData 拥有的值 显示 使用不同的 布局 和样式 -->
<!--  基本信息、测试步骤、测试脚本、测试数据、测试历史 不一样的 布局 -->
<template>
  <div class="tag_content">
    <!-- 基本信息 -->
    <template v-if="tabsId == 1 && dataInfoData.info">
      <!-- 使用CSS Grid实现一行两列 -->
      <div class="grid-container">
        <div class="grid-item">
          <div class="flex_block">
            <div class="text_left">用例名：</div>
            <div>{{ dataInfoData.info.name }}</div>
          </div>
        </div>
        <div class="grid-item">
          <div class="flex_block">
            <div class="text_left">测试类型：</div>
            <div>{{ dataInfoData.info.type }}</div>
          </div>
        </div>
        <div class="grid-item">
          <div class="flex_block">
            <div class="text_left">测试场景：</div>
            <div>{{ dataInfoData.info.scene }}</div>
          </div>
        </div>
        <div class="grid-item">
          <div class="flex_block">
            <div class="text_left">优先级：</div>
            <div>{{ dataInfoData.info.priority }}</div>
          </div>
        </div>
        <div class="full-row">
          <div class="flex_block">
            <div class="text_left">描述：</div>
            <div>{{ dataInfoData.info.describe }}</div>
          </div>
        </div>
      </div>
    </template>
    <!-- 测试步骤 -->
    <template v-else-if="tabsId == 2 && dataInfoData.step">
      <el-table :data="dataInfoData.step" border height="205">
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="value" label="步骤" align="center" />
      </el-table>
    </template>
    <!-- 测试脚本 -->
    <template v-else-if="tabsId == 3 && dataInfoData.script">
      <div class="test_script"></div>
    </template>
    <!-- 测试数据 -->
    <template v-else-if="tabsId == 5 && dataInfoData.data">
      <el-table
        :data="dataInfoData.data"
        border
        height="170"
        v-loading="table_loading"
      >
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="file_name" label="测试数据" align="center" />
      </el-table>
    </template>
  </div>
</template>

<script setup>
defineOptions({
  name: "MyTabMain",
});
const props = defineProps({
  dataInfo: {
    //列表要展示的数据
    type: [Object, Array], // 允许接受 Array 或 Object 类型
    default: () => {},
  },
  tabsId: {
    type: [String, Number],
    default: "1",
  },
});
const dataInfoData = ref({});

const table_loading = ref(false);
// 监听props.type的变化
watch(
  () => props.dataInfo,
  (newVal, oldVal) => {
    console.log("newVal", newVal);
    if (newVal) {
      dataInfoData.value = JSON.parse(JSON.stringify(newVal));
    }
  },
  { immediate: true }
);
</script>
<style scoped lang="scss">
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 0 20px; /* 替代el-row的gutter */
  font-size: 14px;
}
.full-row {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}
.grid-item {
  /* 每个项目的样式 */
  margin-bottom: 20px;
}
.flex_block {
  display: flex;
}
.text_left {
  min-width: 120px;
  width: auto;
  padding-right: 10px;
  white-space: nowrap;
  text-align: right;
}
.test_script {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 5px 30px;
}
.table_top {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
:deep(.is-active) {
  font-weight: 700 !important;
}
</style>
